<template>
	<view class="container">
		<!-- 顶部banner -->
		<image src="/static/images/banner.png" class="banner"></image>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<picker class="search-type" :range="types" :value="typeIndex" @change="onTypeChange">
				<view>{{ types[typeIndex] }}</view>
			</picker>
			<input class="search-input" placeholder="请输入关键词" />
			<button class="search-btn">搜索</button>
		</view>
		<!-- 功能入口 -->
		<view class="features">
			<view class="feature-item" v-for="item in features" :key="item.text">
				<image :src="item.icon" class="feature-icon" />
				<view class="feature-text">{{ item.text }}</view>
			</view>
		</view>
		<!-- 优选招工标题 -->
		<view class="section-title">优选招工</view>
		<!-- 优选招工列表（前3条） -->
		<view class="job-list">
			<view class="job-item" v-for="item in jobs.slice(0, 3)" :key="item.id">
				<view class="job-title">{{ item.title }}</view>
				<view class="job-tags">
					<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
				</view>
				<view class="job-info">
					<text>{{ item.location }}</text>
					<text>· 距离：{{ item.distance }}</text>
				</view>
				<view class="job-time">截止时间：{{ item.deadline }}</view>
				<view class="job-bottom">
					<view class="job-meta">
						<text class="cert" v-if="item.cert">企业认证</text>
						<text class="real" v-if="item.real">已实名</text>
						<text class="views">共{{ item.views }}个浏览</text>
					</view>
					<button class="call-btn">致电</button>
				</view>
			</view>
		</view>
		<!-- 优选牛人标题 -->
		<view class="section-title">优选牛人</view>
		<!-- 优选牛人列表（前3条） -->
		<view class="talent-list">
			<view class="talent-item" v-for="item in talents.slice(0, 3)" :key="item.id">
				<image class="avatar" :src="item.avatar" />
				<view class="talent-header">
					<text class="name">{{ item.name }}</text>
					<text class="real" v-if="item.real">已实名</text>
					<text class="niu">牛人</text>
				</view>
				<view class="talent-info">
					<text>{{ item.gender }} | {{ item.age }}岁 | {{ item.exp }}年 | {{ item.city }}</text>
				</view>
				<view class="talent-desc">{{ item.desc }}</view>
				<view class="talent-tags">
					<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
				</view>
				<view class="talent-bottom">
					<view class="talent-salary">{{ item.salary }}</view>
					<button class="call-btn">致电</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const types = ['牛人', '招工'];
const typeIndex = ref(0);
function onTypeChange(e) {
	typeIndex.value = e.detail.value;
}
const features = [
	{ icon: '/static/images/icon/shouye.png', text: '必存好活' },
	{ icon: '/static/images/icon/tongxunlu.png', text: '我的发布' },
	{ icon: '/static/images/icon/tianjiayonghu.png', text: '招工VIP' },
	{ icon: '/static/images/icon/duihuaxinxi.png', text: '致电认证' },
	{ icon: '/static/images/icon/yonghu.png', text: '收藏招工' }
];
// 招工数据表（10条）
const jobs = [
	{ id: 1, title: '天津河西区装卸队招装卸工，白班日结350-500，管吃管住', tags: ['操作工', '普工', '180/天'], location: '天津市农学院南行200米', distance: '5km', deadline: '2024-12-12 24:00', cert: true, real: true, views: 238 },
	{ id: 2, title: '销售经理1名，能吃苦耐劳，管吃管住', tags: ['销售', '普工', '200/天'], location: '天津市南开区', distance: '3km', deadline: '2024-12-15 18:00', cert: true, real: false, views: 120 },
	{ id: 3, title: '天津滨海新区招普工，包吃住', tags: ['普工', '包吃住', '150/天'], location: '滨海新区工业园', distance: '8km', deadline: '2024-12-20 20:00', cert: false, real: true, views: 98 },
	{ id: 4, title: '河东区招操作工，月结', tags: ['操作工', '月结', '5000/月'], location: '河东区', distance: '2km', deadline: '2024-12-30 12:00', cert: true, real: true, views: 56 },
	{ id: 5, title: '塘沽招装卸工，日结', tags: ['装卸工', '日结', '220/天'], location: '塘沽区', distance: '12km', deadline: '2024-12-25 17:00', cert: false, real: false, views: 77 },
	{ id: 6, title: '西青区招普工', tags: ['普工', '180/天'], location: '西青区', distance: '6km', deadline: '2024-12-18 19:00', cert: true, real: true, views: 201 },
	{ id: 7, title: '南开区招销售', tags: ['销售', '提成', '3000+'], location: '南开区', distance: '4km', deadline: '2024-12-22 10:00', cert: false, real: true, views: 65 },
	{ id: 8, title: '河西区招搬运工', tags: ['搬运工', '180/天'], location: '河西区', distance: '5km', deadline: '2024-12-28 16:00', cert: true, real: false, views: 89 },
	{ id: 9, title: '塘沽招普工', tags: ['普工', '包吃住', '160/天'], location: '塘沽区', distance: '13km', deadline: '2024-12-29 15:00', cert: false, real: true, views: 44 },
	{ id: 10, title: '东丽区招装卸工', tags: ['装卸工', '180/天'], location: '东丽区', distance: '7km', deadline: '2024-12-27 14:00', cert: true, real: false, views: 33 }
];
// 牛人数据表（10条）
const talents = [
	{ id: 1, name: '李国友', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 47, exp: 10, city: '天津', desc: '本人无不良嗜好，耐心工作，从事本行业多年，经验丰富。', tags: ['操作工', '普工', '面议'], salary: '4000-6000/月', real: true },
	{ id: 2, name: '王伟', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 35, exp: 8, city: '天津', desc: '吃苦耐劳，服从安排，经验丰富。', tags: ['普工', '搬运工', '面议'], salary: '5000-7000/月', real: true },
	{ id: 3, name: '张敏', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 29, exp: 5, city: '天津', desc: '认真负责，适应能力强。', tags: ['操作工', '销售', '面议'], salary: '4000-5000/月', real: false },
	{ id: 4, name: '赵强', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 40, exp: 15, city: '天津', desc: '多年工厂经验，能吃苦。', tags: ['普工', '装卸工', '面议'], salary: '6000-8000/月', real: true },
	{ id: 5, name: '刘洋', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 32, exp: 7, city: '天津', desc: '责任心强，团队合作。', tags: ['销售', '操作工', '面议'], salary: '4500-6000/月', real: false },
	{ id: 6, name: '孙丽', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 38, exp: 12, city: '天津', desc: '沟通能力好，执行力强。', tags: ['普工', '搬运工', '面议'], salary: '5000-6500/月', real: true },
	{ id: 7, name: '周杰', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 45, exp: 20, city: '天津', desc: '经验丰富，能吃苦耐劳。', tags: ['装卸工', '普工', '面议'], salary: '7000-9000/月', real: true },
	{ id: 8, name: '吴敏', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 30, exp: 6, city: '天津', desc: '认真细致，适应能力强。', tags: ['操作工', '销售', '面议'], salary: '4000-5500/月', real: false },
	{ id: 9, name: '郑伟', avatar: '/static/images/icon/yonghu.png', gender: '男', age: 36, exp: 9, city: '天津', desc: '团队合作，执行力强。', tags: ['搬运工', '普工', '面议'], salary: '5000-7000/月', real: true },
	{ id: 10, name: '钱芳', avatar: '/static/images/icon/yonghu.png', gender: '女', age: 28, exp: 4, city: '天津', desc: '学习能力强，积极向上。', tags: ['销售', '操作工', '面议'], salary: '4000-5000/月', real: false }
];
</script>

<style scoped>
.container {
	padding: 16rpx;
	background: #f6f8fa;
}

.banner {
	width: 100%;
	height: 180rpx;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 8rpx;
	padding: 8rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}

.search-type {
	width: 100rpx;
	color: #007aff;
	margin-right: 8rpx;
}

.search-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 8rpx;
	font-size: 26rpx;
}

.search-btn {
	background: #1890ff;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	padding: 8rpx 24rpx;
	font-size: 26rpx;
	margin-left: 8rpx;
}

.features {
	display: flex;
	justify-content: space-between;
	background: #fff;
	border-radius: 8rpx;
	padding: 16rpx 0;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}

.feature-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.feature-icon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
}

.feature-text {
	font-size: 22rpx;
	color: #333;
}

.section-title {
	font-weight: bold;
	font-size: 28rpx;
	color: #1890ff;
	margin: 16rpx 0 8rpx 0;
}

.job-list {
	background: #fff;
}

.job-item {
	background: #fff;
	margin-bottom: 12rpx;
	padding: 12rpx;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}

.job-title {
	font-weight: bold;
	font-size: 30rpx;
	margin-bottom: 8rpx;
}

.job-tags {
	margin-bottom: 8rpx;
}

.tag {
	background: #f0f0f0;
	color: #007aff;
	border-radius: 6rpx;
	padding: 2rpx 10rpx;
	margin-right: 8rpx;
	font-size: 22rpx;
}

.tag.blue {
	background: #e6f7ff;
	color: #1890ff;
}

.job-info {
	color: #888;
	font-size: 22rpx;
	margin-bottom: 4rpx;
}

.job-time {
	color: #faad14;
	font-size: 22rpx;
	margin-bottom: 8rpx;
}

.job-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.job-meta {
	display: flex;
	align-items: center;
}

.cert,
.real,
.views {
	color: #1890ff;
	font-size: 22rpx;
	margin-right: 12rpx;
}

.call-btn {
	background: #1890ff;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	padding: 6rpx 18rpx;
	font-size: 24rpx;
	margin-left: 12rpx;
	position: absolute;
	right: 0;
	bottom: 5rpx;
}

.talent-list {}

.talent-item {
	background: #fff;
	margin-bottom: 12rpx;
	padding: 12rpx;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}

.avatar {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	margin-right: 8rpx;
}

.talent-header {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.name {
	font-weight: bold;
	font-size: 30rpx;
	margin-right: 8rpx;
}

.real {
	color: #1890ff;
	font-size: 22rpx;
	margin-right: 8rpx;
}

.niu {
	color: #faad14;
	font-size: 22rpx;
}

.talent-info {
	color: #888;
	font-size: 22rpx;
	margin-bottom: 4rpx;
}

.talent-desc {
	color: #888;
	font-size: 22rpx;
	margin-bottom: 8rpx;
}

.talent-tags {
	margin-bottom: 8rpx;
}

.talent-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;

}

.talent-salary {
	color: #faad14;
	font-size: 22rpx;
}
</style>
